<template>
	<view class="longlist">
		<u-navbar title="首页" :is-back='false' :background="navbgcolor" z-index="10076" title-color="#000"
			:title-bold="true">
			<view class="slot-wrap">
				<view class="" @click="showmd = !showmd" style="padding-left: 20rpx;font-size: 30rpx;">
					<text>{{sellist[nowselidx].name}}</text>
				</view>
			</view>
			<view class="" slot="right">
				<!-- <u-icon name="chat" size="38"></u-icon> -->
			</view>
		</u-navbar>
		<u-popup v-model="showmd" mode="top" border-radius="14">
			<view class="mtop" style="margin-top: 180rpx;min-height: 200rpx; border-radius: 20rpx;background: #fff;">
				<view v-for="i,index in sellist" @click="showmd = !showmd;$store.commit('change',index)"
					style="border-bottom: 1px solid #ccc;padding: 0 30rpx;line-height: 100rpx;height: 100rpx;overflow: hidden;">
					<u-avatar size="60" style="margin-top: 20rpx;display: block;float: left;margin-right: 10rpx;"
						src='/static/uview/example/template.png'></u-avatar>{{i.name}}
					<u-icon v-if="nowselidx == index" style="float: right;margin-top: 34rpx;" color="#2979ff"
						name="checkbox-mark"></u-icon>
				</view>
			</view>
		</u-popup>
		<map style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;" :latitude="latitude"
			:longitude="longitude" :markers="covers"></map>
		<!-- <iframe src="http://127.0.0.1:8848/cmdapp/web/position.html" frameborder="0" style="height: 300rpx;width: 100vh;"></iframe> -->
		<!-- <web-view src="http://127.0.0.1:8848/cmdapp/web/position.html"></web-view> -->
		<u-toast ref="uToast" />
		<view class="botlist" :style="{bottom:nowpos + 'px'}" @touchstart="touchstart" @touchmove.stop="touchmove"
			@touchend="touchend">
			<view class="" style="margin: 0 auto;width: 60rpx;background: #ccc;height: 10rpx;border-radius: 10rpx;margin-bottom: 10rpx;margin-top: -6rpx;">
			</view>
			<view class="" style="position: absolute;top: -43px;left: 30rpx;border: 1rpx solid #ccc; background: #fff;padding: 10rpx 0;border-radius: 20rpx;" >
				<view class="" @click="gotoss()" style="float: left;border-right: 1px solid #ccc;padding: 0 14rpx;">
					<u-icon name="/static/guiji.png" color="#2B85E4" size="50"></u-icon>
				</view>
				<view class="" @click="posi" style="float: left;border-right: 1px solid #ccc;padding: 0 14rpx;">
					<u-icon name="phone" color="#2B85E4" size="50"></u-icon>
				</view>
				<view class="" style="float: left;border-right: 1px solid #ccc;padding: 0 14rpx;">
					<u-icon name="map" color="#2B85E4" size="50"></u-icon>
				</view>
				<view class="" style="float: left;padding: 0 14rpx;">
					<u-icon name="chat" color="#2B85E4" size="50"></u-icon>
				</view>
			</view>
			<view class="navtop">
				<u-avatar size="90" style="margin-top: 8rpx;display: block;float: left;margin-right: 10rpx;"
					src='/static/uview/example/template.png'></u-avatar>
				<view style="float: left;padding-left: 10rpx;width: calc(100% - 130rpx);">
					<view style="">
						<text style="font-weight: bold;font-size: 28rpx;">{{sellist[nowselidx].name}}</text>
						<text style="padding-left: 15rpx;color: #2B85E4;font-size: 24rpx;">WIFI定位</text>
						<text style="padding-left: 15rpx;color: #2B85E4;font-size: 24rpx;">电量25%</text>
					</view>
					<view style="font-size: 24rpx;color: rgba(0,0,0,.5);margin-bottom: 2rpx;">
						2021-11-27 12:54:56
					</view>
					<view style="color: rgba(0,0,0,.8);line-height: 30rpx;">
						广东省佛山市海南区某某路广东省佛山市
					</view>
				</view>
			</view>
			<u-cell-group>
				<u-cell-item :title-style="{'fontSize': '32rpx'}" icon-size="45" icon="/static/icon0.png" title="围栏"></u-cell-item>
				<u-cell-item :title-style="{'fontSize': '32rpx'}" icon-size="45" icon="/static/icon1.png" title="步数:2960 2.01公里 135千卡">
				</u-cell-item>
				<u-cell-item :title-style="{'fontSize': '32rpx'}" icon-size="45" icon="/static/icon2.png" title="心率:96 bmp"
					label="2021-11-26 02:16:35">
					<text
						style="font-size: 30rpx;display: inline-block;width: 35rpx;height: 35rpx;background: #ccc;text-align: center;line-height: 35rpx;border-radius: 50%;color: #fff;">?</text>
				</u-cell-item>
				<u-cell-item :title-style="{'fontSize': '32rpx'}" icon-size="45" icon="/static/icon3.png" title="血压:144/91 mmHg"
					label="2021-11-26 02:16:35">
					<text
						style="font-size: 30rpx;display: inline-block;width: 35rpx;height: 35rpx;background: #ccc;text-align: center;line-height: 35rpx;border-radius: 50%;color: #fff;">?</text>
				</u-cell-item>
				<u-cell-item :title-style="{'fontSize': '32rpx'}" icon-size="45" icon="/static/icon4.png" title="血氧:97%"
					label="2021-11-26 02:16:35">
				</u-cell-item>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showmd: false,
				value1: 1,
				latitude: 39.909,
				longitude: 116.39742,
				start: {},
				end: {},
				move: {},
				botnav: 50,
				startpos: 0,
				nowpos: -226,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '/static/js_bak.png',
					width: 40,
					height: 40,
					callout: {
						content: '型号：RTR1010\n时间：2021/11/26\n位置：广东省深圳市大湾区',
						display: 'ALWAYS',
						bgColor: '#fff',
						padding: 20,
						textAlign: 'left',
						borderRadius: 6
					}
				}]
			};
		},
		onPullDownRefresh() {},
		onLoad() {},
		computed: {},
		methods: {
			gotoss(){
				console.log(123)
				this.$u.route({url:'/indexsub/guiji'})
			},
			posi(){//定位
				
			},
			touchstart(e) {
				this.start = e.touches[0];
				this.startpos = JSON.parse(JSON.stringify(this.nowpos))
			},
			touchmove(e) {
				this.move = e.touches[0];
				var zong = this.move.clientY - this.start.clientY
				this.nowpos = this.startpos - zong
				if (this.nowpos > 50) {
					this.nowpos = 50
				};
				if (this.nowpos < -300) {
					this.nowpos = -300
				};
			},
			touchend(e) {
				this.end = e.changedTouches[0];
				// console.log()
				var zong = this.end.clientY - this.start.clientY
				if (zong > 0) {
					this.nowpos = -226
				} else if(zong < 0) {
					this.nowpos = 0
				}
			}
		},
		created() {},
		onShow() {},
		onHide() {
			this.showmd = false
		},
		onReady() {

		}
	};
</script>
<style>
	.longlist .u-drawer-content{
		background: none !important;
	}
</style>
<style lang="scss" scoped>
	
	.botlist {
		.navtop{
			height: 162rpx;
			overflow: hidden;
			padding: 18rpx 36rpx;
			font-size: 26rpx;
		}
		position: fixed;
		bottom: var(--window-bottom);
		left: 0;
		width: 100%;
		background: #fff;
		border-top-left-radius: 25rpx;
		border-top-right-radius: 25rpx;
		border-top: 1px solid #ccc;
		padding-top: 10px;
	}
</style>
<style>
	.u-cell {
		padding: 14rpx 34rpx !important;
	}
</style>
